<template>
  <el-card v-loading="loading">
    <el-form size="small" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="标题名称：" required prop="title">
        <el-input
          v-model="form.title"
          style="width: 400px"
          placeholder="请输入标题"
        />
        <div class="tips">标题1~80个字</div>
      </el-form-item>
      <el-form-item label="封面缩图：" required prop="image">
        <el-upload
          action="/api/admin/article/upload"
          :show-file-list="false"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleUpload"
        >
          <el-image
            v-if="form.imageUrl"
            style="width: 115px; height: 60px"
            :src="form.imageUrl"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="tips">
          只能上传jpg/png格式文件，文件不能超过5kb，规格：115px * 60px
        </div>
      </el-form-item>
      <el-form-item label="公司名称：">
        <el-input
          v-model="form.source1"
          style="width: 400px"
          placeholder="请输入公司名称，如“中国人民保险"
        />
        <div class="tips">公司名称1~20个字</div>
      </el-form-item>

      <el-form-item label="描述：">
        <el-input
          v-model="form.titleDesc"
          type="textarea"
          rows="4"
          style="width: 600px"
          placeholder="请输入描述"
        />
        <div class="tips">描述~100个字</div>
      </el-form-item>
      <el-form-item label="链接：">
        <el-input
          v-model="form.link"
          style="width: 400px"
          placeholder="请输入链接地址"
        />
        <div class="tips">活动主题1~80个字</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { getArticleById, addArticle, editArticle } from "@/api";

export default {
  name: "EditMediaPage",
  components: { Editor, Toolbar },
  data() {
    return {
      form: {
        title: "",
        image: "",
        imageUrl: "",
        source1: "",
        link: '',
        titleDesc: "",
        type: 2,
      },
      rules: {
        title: [{ required: true, message: "请填写标题" }],
        img: [{ required: true, message: "请上传封面图片" }],
      },
      id: this.$route.params.id,
      editor: null,
      mode: "simple", // or 'simple',
      loading: true,
    };
  },
  mounted() {
    if (this.id) {
      this.getDetail();
    } else {
      this.loading = false;
    }
  },
  methods: {
    handlePictureCardPreview() {},
    handleRemove() {},
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    async getDetail() {
      try {
        this.loading = true;
        const { data } = await getArticleById({ id: this.id });
        this.loading = false;
        data.imagePath = data.imageUrl;
        this.form = data;
      } catch (error) {
        this.loading = false;
      }
    },
    handleUpload(data) {
      if (data.retcode === 200) {
        this.form.image = data.data.fileName;
        this.form.imageUrl = data.data.filePath;
      }
    },
    // 保存
    async handleSave() {
      try {
        let res = null;
        let msg = "";
        if (!this.id) {
          res = await addArticle(this.form);
          msg = "添加成功";
        } else {
          res = await editArticle(this.form);
          msg = "修改成功";
        }
        if (res.retcode === 200) {
          this.$message({
            message: msg,
            type: "success",
            duration: 2000,
            onClose: () => {
              this.$router.push({ path: "/bb/media/list" });
            },
          });
        }
      } catch (error) {}
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss" scoped>
.tips {
  line-height: 1.6;
  font-size: 12px;
  color: #999;
}
.avatar-uploader-icon {
  width: 115px;
  height: 60px;
  border: 1px solid #dcdfe6;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
  color: #dcdfe6;
}
</style>
